<template>
  <div class="w-full overflow-x-auto">
    <table
      class="w-full text-left border border-collapse rounded sm:border-separate border-slate-200"
      cellspacing="0"
    >
      <thead>
        <tr>
          <th
            v-for="(header, index) in props.tableHeaders"
            :key="index"
            scope="col"
            class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
          >
            {{ header }}
          </th>
          <th
            v-if="showButtonsColumn"
            scope="col"
            class="h-12 px-6 text-sm font-medium border-l first:border-l-0 stroke-slate-700 text-slate-700 bg-slate-100"
          >
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(row, rowIndex) in props.tableData"
          :key="rowIndex"
          :style="{ backgroundColor: rowIndex % 2 !== 0 ? props.alternateRowColor : '' }"
        >
          <td
            v-for="(value, colIndex) in row"
            :key="colIndex"
            :width="props.specificColumnWidth"
            class="h-12 px-6 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
          >
            {{ value }}
          </td>
          <td
            v-if="showButtonsColumn"
            class="h-12 px-6 space-x-2 text-sm transition duration-300 border-t border-l first:border-l-0 border-slate-200 stroke-slate-500 text-slate-500"
          >
            <button
              class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-violet-500 hover:bg-violet-600 focus:bg-violet-700 disabled:cursor-not-allowed disabled:border-violet-300 disabled:bg-violet-300 disabled:shadow-none"
              @click="handleViewClick(rowIndex)"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="w-4 h-4"
              >
                <path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
                <path
                  fill-rule="evenodd"
                  d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
                  clip-rule="evenodd"
                />
              </svg>
              <span>查看</span>
            </button>
            <button
              class="inline-flex items-center justify-center h-8 gap-2 px-4 text-xs font-medium tracking-wide text-white transition duration-300 rounded focus-visible:outline-none whitespace-nowrap bg-violet-500 hover:bg-violet-600 focus:bg-violet-700 disabled:cursor-not-allowed disabled:border-violet-300 disabled:bg-violet-300 disabled:shadow-none"
              @click="handleEditClick(rowIndex)"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
                class="w-4 h-4"
              >
                <path
                  d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
                />
              </svg>
              <span>编辑</span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

function handleViewClick(rowIndex: number) {
  console.log(`View button clicked for row ${rowIndex}`)
}

function handleEditClick(rowIndex: number) {
  console.log(`Edit button clicked for row ${rowIndex}`)
}

const props = defineProps({
  tableHeaders: {
    type: Array,
    required: true
  },
  tableData: {
    type: Array,
    required: true
  },
  alternateRowColor: {
    type: String,
    default: '#f0f0f0'
  },
  specificColumnWidth: {
    type: [String, Number],
    default: 'auto'
  },
  showButtonsColumn: {
    type: Boolean,
    default: false
  }
})
</script>
